<template>
    <div>
        <el-row>
            <el-col :span="12">
                <el-card class="fixedHigh">
                    <div class="ml10">
                        <div class="fontSize">
                            <i class="iconfont icon-fuwuyunhang mr10 service"></i>服务运行中心
                        </div>
                        <el-row>
                            <el-col :span="8" v-for="item in standardData" :key="item.id">
                                <div class="mt30 width">
                                    <el-image
                                        style="width: 1rem; height: 1rem"
                                        :src="item.status === '1' ? successURL : errorURL"></el-image>
                                    <div class="ml10">
                                        <div>{{item.appname}}</div>
                                        <div>{{item.ip}}</div>
                                        <div>({{item.httpport}}/{{item.socketport}})</div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="fixedHigh" style="margin-left: 0.1rem">
                    <div class="ml10">
                        <div class="fontSize">
                            <i class="iconfont icon-fuwuyunhang mr10 atomicService"></i>原子服务运行中心
                        </div>
                        <el-row>
                            <el-col :span="8" v-for="item in atomicData" :key="item.id">
                                <div class="mt30">
                                    <el-image
                                        style="width: 1rem; height: 1rem"
                                        :src="item.status === '1' ? successURL : errorURL"></el-image>
                                    <div class="ml10">
                                        <div>{{item.appname}}</div>
                                        <div>{{item.ip}}</div>
                                        <div>({{item.httpport}}/{{item.socketport}})</div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="fixedHigh" style="margin-top: 0.2rem">
                    <div class="ml10 mt20">
                        <div class="fontSize">
                            <i class="iconfont icon-fuwuguanli mr10 management"></i>服务管理中心
                        </div>
                        <el-row>
                            <el-col :span="8" v-for="item in managementData" :key="item.id">
                                <div class="mt30">
                                    <el-image
                                        style="width: 1rem; height: 1rem"
                                        :src="item.status === '1' ? successURL : errorURL"></el-image>
                                    <div class="ml10">
                                        <div>{{item.appname}}</div>
                                        <div>{{item.ip}}</div>
                                        <div>({{item.httpport}}/{{item.socketport}})</div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="fixedHigh" style="margin: 0.2rem 0.1rem 0 0.1rem">
                    <div class="ml10 mt20">
                        <div class="fontSize">
                            <i class="iconfont icon-fuwuzhuce mr10 registered"></i>服务注册中心
                        </div>
                        <el-row>
                            <el-col :span="8" v-for="item in registeredData" :key="item.id">
                                <div class="mt30">
                                    <el-image
                                        style="width: 1rem; height: 1rem"
                                        :src="item.status === '1' ? successURL : errorURL"></el-image>
                                    <div class="ml10">
                                        <div>{{item.appname}}</div>
                                        <div>{{item.ip}}</div>
                                        <div>({{item.httpport}}/{{item.socketport}})</div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                successURL: '../../../static/images/use.png',
                errorURL: '../../../static/images/nouse.png',
                apptype: {
                    standard: 2,
                    atomic: 5,
                    management: 3,
                    registered: 1
                },
                standardData: [],
                atomicData: [],
                managementData: [],
                registeredData: []
            }
        },
        mounted() {
            this.getStandardData()
            this.getAtomicData()
            this.getManagementData()
            this.getRegisteredData()
        },
        methods: {
            // 获取服务运行中心数据
            getStandardData() {
                this.$http.get('/esbApp/firstPage', {
                    apptype: this.apptype.standard
                }).then(result => {
                    if (result.success) {
                        this.standardData = result.data
                    }
                })
            },
            // 获取原子服务运行中心数据
            getAtomicData() {
                this.$http.get('/esbApp/firstPage', {
                    apptype: this.apptype.atomic
                }).then(result => {
                    if (result.success) {
                        this.atomicData = result.data
                    }
                })
            },
            // 获取服务管理中心数据
            getManagementData() {
                this.$http.get('/esbApp/firstPage', {
                    apptype: this.apptype.management
                }).then(result => {
                    if (result.success) {
                        this.managementData = result.data
                    }
                })
            },
            // 获取服务注册中心数据
            getRegisteredData() {
                this.$http.get('/esbApp/firstPage', {
                    apptype: this.apptype.registered
                }).then(result => {
                    if (result.success) {
                        this.registeredData = result.data
                    }
                })
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .el-card {
        box-shadow: none;
    }

    .el-row {
        font-size: 0.12rem;
    }

    .fixedHigh {
        height: 5.2rem;
        margin-right: .1rem;
        min-width: 4rem;
    }

    .mt30 {
        margin-top: 0.3rem;
    }

    .fontSize {
        margin-top: 0.1rem;
        font-size: 0.2rem;
    }

    .service {
        color: #00caa0;
    }

    .atomicService {
        color: #5586FB;
    }

    .management {
        color: #F4B00D;
    }

    .registered {
        color: #FF7878;
    }

    .width {
        width: 2.2rem;
    }
</style>
